import React, { Component } from 'react'
import {
    Carousel,
    Layout,
    Card,
    List,
    message
} from 'antd';
import {
    platformOverviewReq,
    slideReq
} from '../../requests/indexPage'
import './IndexPage.less'
import { listArticleInfoReq } from '../../requests/article';
import ArticleType from '../../types/ArticleType';
import ArticleInfo from '../../types/ArticleInfo';
import { Link } from 'react-router-dom';
import { getRes } from "../../configFile";
import platformIcon from '../../static/images/平台概况.svg'
import latestIcon from '../../static/images/最近.svg'

//state接口
interface IState {
    platformOverview: string
    slidePictureList: Array<{
        slidePath: string,
        slideDescription: string
    }>
    newArticle: Array<ArticleInfo>
}

//props接口
interface IProps { }

export default class IndexPage extends Component<IProps, IState> {
    constructor(props: IProps) {
        super(props)
        this.state = {
            slidePictureList: [],
            platformOverview: '',
            newArticle: [],
        }
    }

    async componentDidMount() {
        //获取轮播图
        try {
            const res = getRes(await slideReq())
            if (res.isSuccessful) {
                this.setState({ slidePictureList: res.data });
            } else {
                console.error(res);
                message.error("获取轮播图失败")
            }
        }
        catch (error) {
            message.error(error.toString())
        }
        //获取平台概况
        try {
            const res = getRes(await platformOverviewReq())
            if (res.isSuccessful) {
                this.setState({ platformOverview: res.data })
            } else {
                console.error(res);
                message.error("获取平台概况失败")
            }
        }
        catch (error) {
            message.error(error.toString())
        }
        //获取最新更新
        try {
            //offset为0，limit为6，只取最新的6条
            const res = getRes(await listArticleInfoReq(ArticleType.EVALUATION, 0, 6))
            if (res.isSuccessful) {
                this.setState({ newArticle: res.data })
            } else {
                console.error(res);
                message.error("最新更新文章获取失败")
            }
        }
        catch (error) {
            message.error(error.toString())
        }
    }


    render() {
        return (
            <Layout className='layout' style={{ minHeight: '100%' }} >

                <div className='carouselWrapper'>
                    <Carousel autoplay >
                        {this.state.slidePictureList.map(function (slideInfo) {
                            return (
                                <div className='slidePicture' key={slideInfo.slidePath}>
                                    <img src={slideInfo.slidePath} alt="轮播图" style={{ width: '100%' }} />
                                    <div className='slideDescription'>
                                        <span>{slideInfo.slideDescription}</span>
                                    </div>
                                </div>
                            )
                        })}
                    </Carousel>
                </div>

                <div className="frameCardWrapper">
                    <div className='indexCardWrapper'>
                        <div className="platform">
                            <Card
                                title={
                                    <div className="header"><img src={platformIcon} alt='platformIcon' />
                                        <b>平台概况</b>
                                    </div>
                                }
                                bordered={false}
                                headStyle={{ fontSize: '20px', color: "#454545" }}
                            >
                                {this.state.platformOverview}
                            </Card>
                        </div>
                        <div className="updateArticle">
                            <Card
                                title={
                                    <div className="header"><img src={latestIcon} alt='latestIcon' />
                                        <b>最新更新</b>
                                    </div>
                                }
                                bordered={false}
                                headStyle={{ fontSize: '20px', color: "#454545" }}
                            >
                                <div style={{ width: 400 }}>
                                    <List
                                        dataSource={this.state.newArticle}
                                        size='default'
                                        renderItem={item => (
                                            <List.Item>
                                                <List.Item.Meta
                                                    title={<Link to={`/article/${item.articleID}`}>{item.title}</Link>}
                                                    style={{ alignItems: 'center' }}
                                                />
                                            </List.Item>
                                        )} />
                                </div>
                            </Card>
                        </div>
                    </div>
                </div>
            </Layout>
        )
    }
}